<template>
  <!-- <div class="filter-item" :style="{width: `calc(100% / ${split})`}"> -->
  <div class="filter-item" :style="{width: item.width || '180px'}">
    <template v-if="item.type === 'input'">
      <el-form-item :prop="item.key" :rules="item.rule || null">
        <el-input
          v-model="form[item.key]"
          :title="item.title||item.placeholder"
          :placeholder="item.placeholder"
          :clearable="item.clearable !== undefined ? item.clearable : true" />
      </el-form-item>
    </template>
    <template v-else-if="item.type === 'select'">
      <el-form-item :prop="item.key" :rules="item.rule || null">
        <el-select
          v-if="item.listType==='string'"
          v-model="form[item.key]"
          :title="item.title||item.placeholder"
          :placeholder="item.placeholder"
          :clearable="item.clearable !== undefined ? item.clearable : true"
          @change="value => item.changeFn && item.changeFn(value)">
          <el-option v-if="item.all" :label="item.all" value="" />
          <el-option
            v-for="child in item.options"
            :key="child"
            :label="child"
            :value="child" />
        </el-select>
        <el-select
          v-else
          v-model="form[item.key]"
          :title="item.title||item.placeholder"
          :placeholder="item.placeholder"
          :clearable="item.clearable !== undefined ? item.clearable : true"
          @change="value => item.changeFn && item.changeFn(value)">
          <el-option
            v-for="child in item.options"
            :key="child[item.props ? item.props.value : 'value']"
            :label="child[item.props ? item.props.label : 'label']"
            :value="child[item.props ? item.props.value : 'value']" />
        </el-select>
      </el-form-item>
    </template>
    <template v-else-if="item.type === 'multipleSelect'">
      <el-form-item :prop="item.key" :rules="item.rule || null">
        <el-select
          v-model="form[item.key]"
          :title="item.title||item.placeholder"
          multiple
          collapse-tags
          :clearable="item.clearable !== undefined ? item.clearable : true"
          :placeholder="item.placeholder"
          @change="value => item.changeFn && item.changeFn(value)">
          <el-option
            v-for="child in item.options"
            :key="child[item.props ? item.props.value : 'value']"
            :label="child[item.props ? item.props.label : 'label']"
            :value="child[item.props ? item.props.value : 'value']" />
        </el-select>
      </el-form-item>
    </template>
    <template v-else-if="item.type === 'selectTree'">
      <el-form-item :prop="item.key" :rules="item.rule || null">
        <select-tree
          ref="selectTree"
          v-model="form[item.key]"
          :title="item.title||item.placeholder"
          :placeholder="item.placeholder"
          :options="item.options"
          :props="item.props"
          node-click
          @nodeClick="selectTreeChange"
          @clear="clearSelectTree" />
      </el-form-item>
    </template>
    <template v-else-if="item.type === 'date'">
      <el-form-item :prop="item.key" :rules="item.rule || null">
        <el-date-picker
          v-model="form[item.key]"
          :editable="false"
          :title="item.title||item.placeholder"
          :placeholder="item.placeholder"
          :type="item.dateType || 'date'"
          :value-format="item.valueFormat || 'yyyy-MM-dd HH:mm:ss'" />
      </el-form-item>
    </template>
    <template v-else-if="item.type === 'selectTable'">
      <el-form-item :prop="item.key" :rules="item.rule || null">
        <select-table
          ref="selectTable"
          v-model="form[item.key]"
          :filter-form="item.selectTableModel.filterForm"
          :filter-data="item.selectTableModel.filterData"
          :default-data="item.options"
          :placeholder="item.placeholder"
          :columns="item.selectTableModel.columns"
          :total="item.selectTableModel.total"
          :filter-fn="item.selectTableModel.filterFn"
          @current-change="changeTableItem"
          @clear="clearTableItem" />
      </el-form-item>
    </template>
  </div>
</template>
<script>
import SelectTable from '../SelectTable'
export default {
  name: 'FilterItem',
  components: { SelectTable },
  props: {
    form: {
      type: Object,
      default() {
        return {}
      }
    },
    item: {
      type: Object,
      default() {
        return {}
      }
    },
    split: {
      type: Number,
      default: 5
    }
  },
  methods: {
    selectTreeChange(vm, node) {
      this.item.changeFn && this.item.changeFn(vm, node)
    },
    clearSelectTree() {
      this.item.clearFn && this.item.clearFn()
      setTimeout(() => {
        // 下拉表格中的筛选
        this.$refs.selectTree.onCloseTree()
      }, 0)
    },
    changeTableItem(vm, node) {
      this.item.changeFn && this.item.changeFn(vm, node)
    },
    clearTableItem() {
      this.item.clearFn && this.item.clearFn()
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-form-item{
   height: 28px;
   line-height: 28px;
}
</style>
